<template>
    <header>
        <section>
            <form action="baidu.com" onsubmit="return false">
                <label for="title">ToDoList</label>
                <input type="text" placeholder="添加ToDo" v-model="content" @keyup.enter="add" />
            </form>
        </section>
    </header>
</template>
<script setup>
import {ref} from 'vue'
// 1.写入 编译器宏函数  创建一个发生对象
    let emit = defineEmits(['addItem'])
// 2. 创建一个 字符串 并绑定到 input框中
    let content = ref('')
// 3. 当触发事件   发送数据  清空数据
    const  add = ()=>{
        emit('addItem' , content.value)
        content.value = ''//清空数据
    }
</script>
<script>
export default {
    name: "todo-add"
}
</script>
<style scoped>
header {
    height: 50px;
    background: #333;
    background: rgba(47, 47, 47, 0.98);
}

label {
    float: left;
    width: 100px;
    line-height: 50px;
    color: #ddd;
    font-size: 24px;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header input {
    float: right;
    width: 60%;
    height: 24px;
    margin-top: 12px;
    text-indent: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
    border: none;
}
</style>